<script lang="ts" setup>
import { toggleDark } from "~/composables";
import Logo from "~/assets/images/logo.png";
import {computed, ref, unref, watch, watchEffect} from "vue";
import { useRouter } from "vue-router";
import { useLocalStorage } from '@vueuse/core';

const activeIndex = ref('')
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = key + '';
}
const menus = [
  // {
  //   index: '1',
  //   label: '新闻中心',
  //   path: '/news'
  // },
  // {
  //   index: '2',
  //   label: '商品列表',
  //   path: '/products'
  // },
  {
    index: '3',
    label: '产品认证',
    path: '/certification'
  },
  // {
  //   index: '5',
  //   label: '合作伙伴',
  //   path: '/partners'
  // },
]

const userInfo = useLocalStorage('gov-demo-userInfo');
const computedUserInfo = computed(() => {
  try {
    return JSON.parse(userInfo.value);
  } catch (e) {
    return null;
  }
})

const router = useRouter();
watchEffect(() => {
  const { path } = router.currentRoute.value;
  const menu = menus.find((menu) => menu.path === path);
  if (menu) {
    activeIndex.value = menu.index;
  } else {
    activeIndex.value = '';
  }
})

const handleLogout = () => {
  userInfo.value = null;
  router.push('/login')
}
const handleLogin = () => {
  router.push('/login')
}
</script>

<template>
  <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect">
    <div class="logo h-[100%] flex justify-center items-center ml-5">
      <el-avatar :src="Logo" class="m-2 md:h-[85%] w-[auto]" />
      <router-link tag="div" class="justify-center items-center font-bold text-lg h-[100%] ml-5 hidden md:flex" to="/">国家农产品质量安全追溯管理信息平台</router-link>
    </div>
    <el-menu-item v-for="(menu, idx) of menus" :key="idx" :class="{ '!ml-auto': idx === 0 }" :index="menu.index">
      <router-link :to="menu.path">{{ menu.label }}</router-link>
    </el-menu-item>
    <div class="avatar h-[100%] flex justify-center items-center ml-5 cursor-pointer">
      <el-dropdown>
        <span>
          <el-avatar :src="computedUserInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
          <!--<el-icon class="el-icon&#45;&#45;right">-->
          <!--  <arrow-down />-->
          <!--</el-icon>-->
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="computedUserInfo?.name" @click="handleLogout">退出登录</el-dropdown-item>
            <el-dropdown-item v-else @click="handleLogin">登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-menu-item @click="toggleDark()">
      <button
        class="border-none w-full bg-transparent cursor-pointer h-full flex items-center"
        style="height: var(--el-menu-item-height)"
      >
        <i inline-flex i="dark:ep-moon ep-sunny" />
      </button>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.logo {
  height: 100%;
  width: auto;
}
::v-deep(.el-menu) {
  border-right: none;
}
</style>
